<template>
<div id="">
  <el-form ref="groundFilter" :model="ground" :size="defaultFormItemSize" label-width="80px" label-position="right" @submit.native.prevent>
    <filter-box :item-width="350">
      <el-form-item label="阵地名称" prop="formFilter.searchString">
        <el-input class="filter-item" v-model="ground.formFilter.searchString" :clearable="true" placeholder="阵地名称" />
      </el-form-item>
      <el-form-item label="阵地类型" prop="formFilter.groundType">
        <el-select v-model="ground.formFilter.groundType" :clearable="true" placeholder="阵地类型" class="filter-item">
          <el-option v-for="item in initData.groundTypeOptions" :key="item.id" :value="item.id" :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button slot="operator" type="default" :size="defaultFormItemSize" @click="onResetGround">重置</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" @click="refreshGround(true)">查询</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('ground:ground:groundAdd')" @click="onAdd()">
        新增
      </el-button>
    </filter-box>
  </el-form>
  <el-row>
    <el-col :span="24">
      <el-table border ref="ground" :data="ground.Ground.impl.dataList" :size="defaultFormItemSize" @sort-change="ground.Ground.impl.onSortChange" header-cell-class-name="table-header-gray" highlight-current-row
        @current-change="ground.Ground.impl.currentRowChange" style="margin-top:10px">
        <!-- <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="ground.Ground.impl.getTableIndex" /> -->
        <!-- <el-table-column label="组织名称" prop="organization.groundName" min-width="180" show-overflow-tooltip></el-table-column> -->
        <el-table-column label="阵地名称" prop="groundName" min-width="180" show-overflow-tooltip fixed="left"></el-table-column>
        <el-table-column label="阵地类型" prop="groundTypeDictMap.name" width="90"></el-table-column>
        <el-table-column label="所属中心" prop="practiceCenterStr" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column label="所属所" prop="practicePlaceStr" min-width="180"></el-table-column>
        <el-table-column label="所属区划" prop="provinceMap.name" min-width="170" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{getCurrentArea(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="开放时间" prop="openTime" min-width="170" show-overflow-tooltip></el-table-column>
        <el-table-column label="可容纳人数" prop="capacity" width="100"></el-table-column>
        <el-table-column label="咨询电话" prop="tel" min-width="150"></el-table-column>
        <el-table-column label="发布状态" prop="status" width="70">
          <template slot-scope="scope">
            <span>{{getCurrentStatus(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="校验状态" prop="hold1" width="70">
          <template slot-scope="scope">
            <span>{{scope.row.hold1 == '1' ? '已校验' : '未校验'}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="审批状态" prop="auditStatus" width="100"></el-table-column> -->
        <el-table-column label="创建时间" prop="createTime" width="130">
          <template slot-scope="scope">
            <span>{{formatDateByStatsType(scope.row.createTime, 'day')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="220">
          <template slot-scope="scope">
            <HandleOperate :rowData="scope.row" @onEdit="onEdit" @onDelete="onDelete" @onShow="onShow" @onConfirm="onConfirm" @onPublish="onPublish" @onOffLine="onOffLine" @onCancel="onCancel" @onActivity="onActivity" @onLog="onLog"
              @onPreview="onPreview" @onQuickEdit="onQuickEdit"></HandleOperate>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 10px;">
        <el-pagination :total="ground.Ground.impl.totalCount" :current-page="ground.Ground.impl.currentPage" :page-size="ground.Ground.impl.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes"
          @current-change="ground.Ground.impl.onCurrentPageChange" @size-change="ground.Ground.impl.onPageSizeChange">
        </el-pagination>
      </el-row>
    </el-col>
  </el-row>
  <el-dialog :visible.sync="dialogVisible" append-to-body title="打卡记录" :key="nowGroundId" width="65%">
    <logTable :groundId="nowGroundId" :groundTypeList="initData.groundTypeOptions"></logTable>
  </el-dialog>
  <MobileDetail v-if="showMobile" :formData="detailData" @handleClose="closeModal"></MobileDetail>
</div>
</template>
<script>
import {
  findTreeNode,
  findTreeNodePath,
  findItemFromList
} from '@/utils';
import rules from '@/utils/validate.js';
import {
  DropdownWidget,
  TableWidget,
  UploadWidget,
  ChartWidget
} from '@/utils/widget.js';
import {
  uploadMixin,
  statsDateRangeMixin
} from '@/core/mixins';
import {
  GroundController,
  DictionaryController
} from '@/api';
import {
  treeDataTranslate
} from '@/utils';
import HandleOperate from '../handle'
import logTable from '../log'
import MobileDetail from '../H5Show/index.vue'
export default {
  name: 'ground',
  props: {
    statusMap: {
      type: Object,
      default: () => {}
    },
    currentAreaCode: {
      type: String,
      default: ""
    },
    initData: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    HandleOperate,
    logTable,
    MobileDetail
  },
  mixins: [uploadMixin, statsDateRangeMixin],
  data() {
    return {
      ground: {
        formFilter: {
          searchString: undefined,
          status: undefined,
          groundType: undefined,
          districts: undefined,
        },
        formFilterCopy: {
          searchString: undefined,
          status: undefined,
          groundType: undefined,
          districts: undefined,
        },
        Ground: {
          impl: new TableWidget(this.loadGroundWidgetData, this.loadGroundVerify, true, true, 'updateTime', 0)
        },
        isInit: false
      },
      areaProps: {
        value: 'code',
        label: 'name',
        multiple: true,
        emitPath: false
      },
      dialogVisible: false,
      nowGroundId: "",
      showMobile: false,
      detailData: {},
    }
  },
  methods: {
    onResetGround() {
      this.$refs.groundFilter.resetFields();
      this.$delete(this.ground.formFilter, "districts")
      this.refreshGround(true);
    },
    loadGroundWidgetData(params) {
      let me = this;
      if (params == null) params = {};
      params = {
        ...params
      }
      params.groundDtoFilter = me.ground.formFilter;
      if (me.currentAreaCode) {
        params.groundDtoFilter.areaCode = me.currentAreaCode
      }
      if (me.statusMap.type == 'status') {
        params.groundDtoFilter.status = Number(me.statusMap.value);
        me.$delete(params.groundDtoFilter, "hold1")
      } else if (me.statusMap.type == 'hold1') {
        params.groundDtoFilter.hold1 = me.statusMap.value;
        me.$delete(params.groundDtoFilter, "status")
      } else {
        me.$delete(params.groundDtoFilter, "status")
        me.$delete(params.groundDtoFilter, "hold1")
      }
      return new Promise((resolve, reject) => {
        GroundController.list(me, params).then(res => {
          resolve({
            dataList: res.data.dataList,
            totalCount: Number(res.data.totalCount)
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    loadGroundVerify() {
      return true;
    },
    refreshGround(reloadData = false) {
      if (reloadData) {
        this.ground.Ground.impl.refreshTable(true, 1);
      } else {
        this.ground.Ground.impl.refreshTable();
      }
      if (!this.ground.isInit) {}
      this.ground.isInit = true;
    },
    onAdd() {
      this.$emit("onAdd")
    },
    onEdit(row) {
      this.$emit("onEdit", row)
    },
    onQuickEdit(row) {
      this.$emit("onQuickEdit", row)
    },
    onDelete(row) {
      let params = {};
      params.groundId = row.groundId;
      this.$confirm('是否删除此阵地？').then(res => {
        GroundController.delete(this, params).then(res => {
          this.$message.success('删除成功');
          this.ground.Ground.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
    //校验
    onConfirm(row) {
      let params = {};
      params.groundId = row.groundId;
      params.status = 1;
      this.$confirm('是否校验？').then(res => {
        GroundController.confirm(this, params).then(res => {
          this.$message.success('操作成功');
          this.ground.Ground.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
    //取消校验
    onCancel(row) {
      let params = {};
      params.groundId = row.groundId;
      params.status = 0;
      this.$confirm('是否取消校验？').then(res => {
        GroundController.confirm(this, params).then(res => {
          this.$message.success('操作成功');
          this.ground.Ground.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
    //发布
    onPublish(row) {
      let params = {};
      params.groundId = row.groundId;
      params.status = 10;
      this.$confirm('是否确认发布？').then(res => {
        GroundController.changeStatus(this, params).then(res => {
          this.$message.success('操作成功');
          this.ground.Ground.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
    //下线
    onOffLine(row) {
      let params = {};
      params.groundId = row.groundId;
      params.status = 50;
      this.$confirm('是否确认下线？').then(res => {
        GroundController.changeStatus(this, params).then(res => {
          this.$message.success('操作成功');
          this.ground.Ground.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
    //查看
    onShow(row) {
      this.$emit("onShow", row)
    },
    onActivity(row) {
      this.$emit("onActivity", row)
    },
    //查看打卡记录
    onLog(row) {
      this.nowGroundId = row.groundId;
      this.dialogVisible = true;
    },
    getCurrentArea(row) {
      let str = "";
      let proviceName = row?.provinceMap?.name ? row.provinceMap.name : '';
      let districtName = row?.districtMap?.name ? row.districtMap.name : '';
      let streetName = row?.streetMap?.name ? row.streetMap.name : '';
      str = (proviceName ? proviceName : '') + (districtName ? '-' + districtName : '') + (streetName ? '-' + streetName : '')
      // switch (row.groundType) {
      //   case '4':
      //     str = (proviceName ? proviceName : '') + (districtName ? '-' + districtName : '')
      //     break;
      //   case '2':
      //     str = (proviceName ? proviceName : '') + (districtName ? '-' + districtName : '') + (streetName ? '-' + streetName : '')
      //     break;
      //   case '3':
      //     str = (proviceName ? proviceName : '') + (districtName ? '-' + districtName : '') + (streetName ? '-' + streetName : '')
      //     break;
      //   case '1':
      //     str = (proviceName ? proviceName : '');
      //     break;
      //   default:
      //     str = (proviceName ? proviceName : '');
      // }
      return str
    },
    getCurrentStatus(row) {
      let str = '';
      let arr = this.initData.statusList.filter(x => x.id == row?.status?.toString());
      if (arr.length > 0) {
        str = arr[0].name
      } else {
        str = ''
      }
      return str
    },
    onPreview(row) {
      GroundController.view(this, {
        groundId: row.groundId
      }).then(res => {
        this.detailData = res.data;
        this.showMobile = true;
      })
    },
    closeModal() {
      this.detailData = {}
      this.showMobile = false;
    }
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
</style>
